
const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')
const nameBox = onBox.querySelector('.username')
// 登录验证
testLogin()
function testLogin() {
  // 1. 怎么知道你是否登录过
  // 如果你的 localStorage 内有 login 信息, 并且值为 1, 表示你曾经登录过
  const login = getcookie('login')
  const info = getcookie('info')
  const id = getcookie('id')
  console.log(info,id,login);
  // 1-1. 获取到 localStorage 内的 login 信息
  if (login !== '1') {
    // 1-2. 证明你从来没有登录过
    offBox.classList.add('active')
    onBox.classList.remove('active')
    return
  }
  nameBox.innerText = info
}

// 轮播图 
const banner = document.querySelector('.banner')
const imgBox = document.querySelector('.imgBox')
const pointBox = document.querySelector('.pointBox')
const banner_width = banner.clientWidth
let timer = 0
let index = 1
let flag = true
setPoint()
function setPoint() {

  const pointNum = imgBox.children.length

  for (var i = 0; i < pointNum; i++) {

    const li = document.createElement('li')

    li.classList.add('point_item')

    li.dataset.point = i

    if (i === 0) li.classList.add('active')
    pointBox.appendChild(li)
  }
  pointBox.style.width = (40 + 10) * pointNum + 'px'
}
copyEle()
function copyEle() {
  const first = imgBox.firstElementChild.cloneNode(true)
  const last = imgBox.lastElementChild.cloneNode(true)

  imgBox.appendChild(first)
  imgBox.insertBefore(last, imgBox.firstElementChild)

  imgBox.style.width = imgBox.children.length * 100 + '%'
  imgBox.style.left = -banner_width + 'px'
}
autoPlay()
function autoPlay() {
  timer = setInterval(() => {
    index++

    move(imgBox, { left: -banner_width * index }, moveEnd)
  }, 2000)
}
function moveEnd() {
  if (index === imgBox.children.length - 1) {
    index = 1
    imgBox.style.left = -banner_width * index + 'px'
  }
  if (index === 0) {
    index = imgBox.children.length - 2
    imgBox.style.left = -banner_width * index + 'px'
  }
  for (let i = 0; i < pointBox.children.length; i++) {
    pointBox.children[i].classList.remove('active')
  }
  pointBox.children[index - 1].classList.add('active')
  flag = true
}
overOut()
function overOut() {
  banner.addEventListener('mouseover', () => clearInterval(timer))

  banner.addEventListener('mouseout', () => autoPlay())
}
change()
function change() {
  banner.addEventListener('click', e => {
    e = e || window.event
    const target = e.target || e.srcElement

    if (target.className === 'left') {
      if (!flag) return

      flag = false
      index--
      move(imgBox, { left: -banner_width * index }, moveEnd)
    }

    if (target.className === 'right') {
      if (flag === false) return

      index++
      move(imgBox, { left: -banner_width * index }, moveEnd)
      flag = false
    }

    if (target.className === 'point_item') {
      if (!flag) return

      flag = false
      index = target.dataset.point - 0 + 1
      move(imgBox, { left: -banner_width * index }, moveEnd)
    }
  })
}
changeTab()
function changeTab() {
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
      clearInterval(timer)
    } else if (document.visibilityState === 'visible') {
      autoPlay()
    }
  })
}


// 页面左侧的楼层导航
// 还没有做完!!!!!
const ol = document.querySelector('.daohang>ol')
const btnA = document.querySelector('.star_li')
const body = document.querySelector('body')
// console.log(li);
window.onscroll = function(){
  const scroll_top = document.documentElement.scrollTop || document.body.scrollTop
  if(scroll_top>500){
    ol.classList.add('active')
  }
  if(scroll_top<500){
    ol.classList.remove('active')
  }
}
btnA.addEventListener('click',e => {
  e = e || window.event
  const scroll_top = document.documentElement.scrollTop || document.body.scrollTop
  try {
    e.preventDefault()
  } catch (error) {
    e.returnValue = false
  }
})

// 请求json文件里面的数据
const ul1 = document.querySelector('#inner_ul1')
const ul2 = document.querySelector('#inner_ul2')
const ul3 = document.querySelector('#inner_ul3')
const ul4 = document.querySelector('#inner_ul4')
const ul5 = document.querySelector('#inner_ul5')
const ul6 = document.querySelector('#inner_ul6')
const ul7 = document.querySelector('#inner_ul7')
const ul8 = document.querySelector('#inner_ul8')

//发请求 拿数据
getCategoryList()
async function getCategoryList() {
  // 1-2. 发送请求
  const res = await pAjax({
    url: 'http://wcy.com:9999/wcy_meizu/src/data/dianshi.json',
    dataType: 'json'
  })
  const res1 = await pAjax({
    url: 'http://wcy.com:9999/wcy_meizu/src/data/bingxiang.json',
    dataType: 'json'
  })
  const res2 = await pAjax({
    url: 'http://wcy.com:9999/wcy_meizu/src/data/xiyiji.json',
    dataType: 'json'
  })
  const res3 = await pAjax({
    url: 'http://wcy.com:9999/wcy_meizu/src/data/shenghuodianqi.json',
    dataType: 'json'
  })
  const res4 = await pAjax({
    url: 'http://wcy.com:9999/wcy_meizu/src/data/chufangdianqi.json',
    dataType: 'json'
  })
  const res5 = await pAjax({
    url: 'http://wcy.com:9999/wcy_meizu/src/data/zhinengzhoubian.json',
    dataType: 'json'
  })
  const res6 = await pAjax({
    url: 'http://wcy.com:9999/wcy_meizu/src/data/Kmiyouxuan.json',
    dataType: 'json'
  })
  const res7 = await pAjax({
    url: 'http://wcy.com:9999/wcy_meizu/src/data/tv.json',
    dataType: 'json'
  })
  bindHtml(res,ul1)
  bindHtml(res1,ul2)
  bindHtml(res2,ul3)
  bindHtml(res3,ul4)
  bindHtml(res4,ul5)
  bindHtml(res5,ul6)
  bindHtml(res6,ul7)
  bindHtml2(res7,ul8)
}

// 页面渲染
function bindHtml(data,a){
  for(let k in data){
    data[k].forEach( item => {
      for(let key in item ){
        item[key].forEach( list => {
          // console.log(list);
          let str = `
            <li>
                <img src="${ list.img_url }" alt="">
                <div>${ list.name }</div>
                <div><span>${list.title }</span></div>
                <div>${ list.new_price }</div>
            </li>
            `
           a.innerHTML += str
        })
      }
    })
  }
}
function bindHtml2(data,b){
  for(let k in data){
    data[k].forEach( item => {
      for(let key in item ){
        item[key].forEach( list => {
          // console.log(list);
          let str = `
            <li>
              <div><img src="${ list.img_url }" alt=""></div>
              <div>${ list.title }</div>
              <div>${ list.name }</div>
              <div><span>${ list.new_price}</span><span><del>${ list.last_price}</del></span></div>
            </li>
            `
           b.innerHTML += str 
        })
      }
    })
  }
}

//去到购物车
const gouwuche = document.querySelector('.gouwuche')
gouwuche.addEventListener('click', () => {
  window.location.href = './cart.html'
})